<template>
    <div :id="id"></div>
</template>

<script>
import echarts from "echarts";

export default {
    name: "line-simple",
    props: ["id", "data", "is_smooth"],
    methods: {
        drawCharts() {
            console.log(this.is_smooth)
            let my_chart = echarts.init(document.getElementById(this.id));
            
            let option = {
                grid: {
                    left: '8%'
                },
                legend: {
                    data: this.data.name,
                    right: 0
                },
                xAxis: {
                    type: "category",
                    data: this.data.x
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 12,
                            color: "#131d2d"
                        }
                    }
                },
                series: [],
                color: this.data.color
            };

            this.data.data.forEach((element, index) => {
                if(element) {
                    option.series.push({
                        data: element,
                        type: 'line',
                        label: {
                            normal: {
                                show: true,
                                positon: "top",
                                color: '#131d2d'
                            }
                        },
                        name: this.data.name[index],
                        smooth: this.is_smooth
                    })
                }
            });
            my_chart.setOption(option);
        }
    },
    mounted() {
        this.drawCharts();
    }
};
</script>

<style>
</style>
